<template>
  <div  >
    <el-form :model="patientInfo" label-width="60px">
      <el-form-item
        label="图片:"
        style="margin-top: 15px"
      >
        <VueDraggable
          @end="submitUpload"
          draggable=".draggable-item"
          v-model="imageInfo"
        >
          <div
            v-for="(item,index) in imageInfo"
            :key="index"
            class="draggable-item"
          >
            <div
              class="icon-close"
              @click="removeImg(item)"
            >
              <i
                class="el-icon-close"
                style="background-color: #fff"
              ></i>
            </div>
            <el-image
              style="width: 146px; height: 146px"
              :src="item.url"
              fit="fill"
              :preview-src-list="srcList"
            >
            </el-image>
          </div>
          <el-upload
            class="upload-img"
            action="#"
            :before-upload="beforeUpload"
            :on-success="uploadImageSuccess"
            multiple
            list-type="picture-card"
            :file-list="imageInfo"
            :show-file-list="false"
          >
            <el-button
              size="small"
              type="primary"
            >图片上传</el-button>

          </el-upload>

        </VueDraggable>
      </el-form-item>
      <div style="margin-top: 6px; text-align: center">
        <el-button
          type="primary"
          size="mini"
          @click="submitUpload"
        >确认已签署</el-button>
      </div>
    </el-form>






  </div>

</template>

<script>
import VueDraggable from 'vuedraggable'
import {consentUploads} from "@/api/treatmentWorkstation/treatmentManagement";

export default {
  name: "moreImage",
  components: {
    VueDraggable
  },
  props: ["type"],
  computed:{
    srcList() {
      return this.imageInfo.map(n => n.url) || []
    }
  },

  data(){
    return{
      patientInfo:{},      // 顾客信息
      imageInfo: [],  // Visia照片信息

    }
  },
  methods:{
    // 上传预处理
    beforeUpload(file) {
      console.log('beforeUpload',file)
      if (file.type.indexOf("image/") == -1) {
        this.$modal.msgError(
          "文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"
        );
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.imageInfo.push({url:reader.result})
        };
      }


    },
    uploadImageSuccess(res, file, fileList){
      console.log('uploadImageSuccess---',res, file, fileList)
      // this.imageInfo.push({url:reader.result})

    },
    removeImg(img){
      this.$confirm('此操作将删除该照片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.imageInfo=this.imageInfo.filter(item=>{
            return item.url != img.url
          })
          console.log('removeImg-----',this.imageInfo)
        })
        .then(() => {
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })

    },
    submitUpload(){

      this.$emit('handleCloseConfirmKnow')

    }



  }

}
</script>

<style scoped>
.draggable-item {
  display: inline-block;
  margin: 0 8px 8px 0;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
  position: relative;
}
.upload-img {
  display: inline-block;
  margin: 0 8px 8px 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  vertical-align: middle;
}

.icon-close {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  color: #00be8b;
  z-index: 1;
}
</style>
